<template>
	<view class="contacts">
		<u-navbar title="聊天" :autoBack="true" @rightClick="rightClick">
			<view slot="right"> <u-icon class="nav-icon-right" name="chat" color="#666" size="48"></u-icon> </view> 
		</u-navbar>
		<u-sticky :enable="enable">
			<view class="tab-list"
				style="">
				<view @click="tabClick(index)"
					:class="num==index?'active':'noactive'"
					v-for="(item,index) in tablist">
					{{item}}
				</view>
			</view>
		</u-sticky>
		
		
		<view class="contacts-container">
			<view class="user-list">
				<view class="user-list-item"
					v-for="(group, uuid) in groups"
					:key="uuid"
					@click="enterChat(group.uuid, 'group')">
					<view class="user-item-avatar"
						style="overflow: hidden; border-radius: 50%;">
						<image :src="group.avatar" />
					</view>
					<view class="user-item-info">
						<view class="user-item-info__name"
							style="line-height: 30x; font-weight: 300;">{{group.name}}</view>
						<view class="user-item-info__name"
							style="line-height: 30x; font-weight: 400; font-size: 12px; color: #666;">2222222222222
						</view>
					</view>

				</view>
			</view>
			<view class="contacts-title"
				v-if="friends && friends.length !=0">联系人</view>
			<view class="user-list">
				<view class="user-list-item"
					v-for="(friend, uuid) in friends"
					:key="uuid"
					@click="enterChat(friend.uuid, 'private')">
					<view class="user-item-avatar">
						<image :src="friend.avatar"></image>
					</view>
					<view class="user-item-info">
						<span class="user-item-info__name">{{friend.name}}</span>
						<span class="online-tips">{{friend.online ? '在线' :'离线'}}</span>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="status" marginTop="30" marginBottom="30"/>
		<image @click="search"
			style="position: fixed; z-index: 1; width: 60px; height: 60px; bottom: 100px; right: 20px;"
			src="/static/pp.png"></image>
	</view>
</template>

<script>
	import {
		chatList
	} from "@/common/config/chat.js"
	// import restApi from "../../lib/restapi";
	// let users = [
	//     {
	//         "uuid": "08c0a6ec-a42b-47b2-bb1e-15e0f5f9a19a",
	//         "name": "Mattie",
	//         "password": "123",
	//         "avatar": '/static/images/Avatar-1.png'
	//     },
	//     {
	//         "uuid": "3bb179af-bcc5-4fe0-9dac-c05688484649",
	//         "name": "Wallace",
	//         "password": "123",
	//         "avatar": '/static/images/Avatar-2.png'
	//     },
	//     {
	//         "uuid": "fdee46b0-4b01-4590-bdba-6586d7617f95",
	//         "name": "Tracy",
	//         "password": "123",
	//         "avatar": '/static/images/Avatar-3.png'
	//     },
	//     {
	//         "uuid": "33c3693b-dbb0-4bc9-99c6-fa77b9eb763f",
	//         "name": "Juanita",
	//         "password": "123",
	//         "avatar": '/static/images/Avatar-4.png'
	//     }
	// ];
	export default {
		name: "contacts",
		data() {
			return {
				enable: true,
				friends: [],
				tablist: [
					'推荐', '已聊过', '未聊过'
				],
				num: 0,
				page: 0,
				status: 'loadmore',
				groups: [{
						"uuid": "08c0a6ec-a42b-47b2-bb1e-15e0f5f9a19a",
						"name": "Mattie",
						"password": "123",
						"avatar": 'https://pic.rmb.bdstatic.com/bjh/down/50fceb9013d48f7aeb03e40659db5e7d.jpeg@c_1,w_408,h_272,x_88,y_81'
					},
					{
						"uuid": "3bb179af-bcc5-4fe0-9dac-c05688484649",
						"name": "Wallace",
						"password": "123",
						"avatar": 'https://pic.rmb.bdstatic.com/bjh/down/50fceb9013d48f7aeb03e40659db5e7d.jpeg@c_1,w_408,h_272,x_88,y_81'
					},
					{
						"uuid": "fdee46b0-4b01-4590-bdba-6586d7617f95",
						"name": "Tracy",
						"password": "123",
						"avatar": 'https://pic.rmb.bdstatic.com/bjh/down/50fceb9013d48f7aeb03e40659db5e7d.jpeg@c_1,w_408,h_272,x_88,y_81'
					},
					{
						"uuid": "33c3693b-dbb0-4bc9-99c6-fa77b9eb763f",
						"name": "Juanita",
						"password": "123",
						"avatar": 'https://pic.rmb.bdstatic.com/bjh/down/50fceb9013d48f7aeb03e40659db5e7d.jpeg@c_1,w_408,h_272,x_88,y_81'
					}
				]
			}
		},
		onShow() {
			// this.init()
			this.enable= true
			console.log('232323')
		},
		onHide() {
			this.enable= false
		},
		onReachBottom() {
		},
		methods: {
			reachBottom() {
				if (this.page >= 3) return;
				this.status = 'loading';
				this.page = ++this.page;
				this.getList()
			},
			getList() {
				let params = {
					username: '',
					password: '',
					name: ''
				}
				chatList(params).then(res => {
					console.log(res, '发布列表')
					this.list = res.data.data.data
					// if(this.list.length<10&&this.page>0){
					// 	this.status = 'nomore'
					// 	return
					// }

				})
			},
			tabClick(index) {
				this.num = index
				this.page = 0
				this.groups = []
			},
			rightClick() {
				console.log('rightClick');
				// uni.navigateTo({
				// 	url: '../HM-chat'
				// })
			},
			enterChat() {
				uni.navigateTo({
					url: '../HM-chat'
				})
			},
			search() {
				uni.navigateTo({
					url: '/pages/Search/Search'
				})
			},

			// init () {
			// 	let currentUser = uni.getStorageSync('currentUser');
			// 	let friendList = restApi.findFriends(currentUser);
			// 	friendList.map((friend ,index)=> {
			// 		friend.online = false;
			// 		this.$set(this.friends, index, friend);
			// 	});
			// 	this.groups = restApi.findGroups(currentUser);
			// 	this.subscribeUserPresence();
			// 	this.hereNow();
			// 	this.goEasy.im.on(this.GoEasy.IM_EVENT.USER_PRESENCE, (user) => {
			// 		this.friends.map(friend => {
			// 			if (friend.uuid == user.id) {
			// 				let state = user.action === 'online' || user.action === 'join';
			// 				this.$set(friend, 'online', state);
			// 			}
			// 		})
			// 	})
			// },
			// subscribeUserPresence () {
			// 	let friendIds = [];
			// 	this.friends.map(friend => {
			// 		friendIds.push(friend.uuid);
			// 	});
			// 	this.goEasy.im.subscribeUserPresence({
			// 		userIds: friendIds,
			// 		onSuccess: function () {
			// 			console.log('订阅上下线成功')
			// 		},
			// 		onFailed: function (error) {
			// 			console.log('订阅好友上下线失败',error)
			// 		}
			// 	});
			// },
			// hereNow () {
			// 	let self = this;
			// 	let friendIds = [];
			// 	this.friends.map(friend => {
			// 		friendIds.push(friend.uuid);
			// 	})
			// 	this.goEasy.im.hereNow({
			// 		userIds: friendIds,
			// 		onSuccess: function (result) {
			// 			result.content.map(friend => {
			// 				self.friends.map(item => {
			// 					if(item.uuid == friend.id) {
			// 						item.online = true;
			// 					}
			// 				})
			// 			})
			// 		},
			// 		onFailed: function (error) {
			// 			console.log('获取好友在线状态失败',error)
			// 		}
			// 	});
			// },
			// enterChat (uuid, type) {//进入私聊
			// 	// let path = type === this.GoEasy.IM_SCENE.PRIVATE
			// 	// 		? '../chat/privateChat/privateChat?to=' + uuid
			// 	// 		: '../chat/groupChat/groupChat?to=' + uuid;
			// 	// uni.navigateTo({
			// 	// 	url: path
			// 	// })
			// }
		}
	}
</script>
<style scoped>
	.nav-icon-right {
		padding: 7px 12px 7px 7px;
	}
	
	.tab-list {
		display: flex;
		background: #f7f7f7;
		width: 100%;
		height: 46px;
		line-height: 46px;
	}
</style>
<style>
	

	.noactive {
		margin-left: 20px;
		font-size: 14px
	}

	.active {
		font-size: 16px;
		margin-left: 20px;
		font-weight: bold;
		position: relative;
	}

	.active::before {
		content: '';
		position: absolute;
		z-index: 1;
		width: 100%;
		height: 4px;
		background: #EA9B37;
		border-radius: 12px;
		left: 0;
		bottom: 0;
	}

	.contacts {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.contacts .contacts-container {
		width: 100%;
		overflow: auto;
	}
	.contacts .user-list-item {
		height: 132rpx;
		padding-left: 32rpx;
		display: flex;
		align-items: center;
	}
	.contacts .user-list-item:last-child .user-item-info{
		border: none;
	}
	.contacts .contacts-title {
		height: 80rpx;
		line-height: 100rpx;
		font-size: 30rpx;
		color: #666666;
		background: #F3F4F7;
		text-indent: 44rpx;
	}

	.contacts .user-list {
		flex-grow: 1;
		background: #ffffff;
		display: flex;
		flex-direction: column;
	}

	.contacts .user-item-avatar {
		width: 96rpx;
		height: 96rpx;
		margin-right: 32rpx;
		overflow: hidden;
		position: relative;
	}

	.contacts .user-item-avatar image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.contacts .user-item-info {
		height: 130rpx;
		padding-right: 32rpx;
		line-height: 35px;
		flex-grow: 1;
		border-bottom: 1px solid #EFEFEF;
		/* display: flex;
		justify-content: space-between;
		align-items: center; */
	}

	.contacts .user-item-info__name {
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-style: normal;
		font-weight: bold;
		color: #262628;
	}

	.contacts .user-item-info__tips {
		height: 44rpx;
		width: 64rpx;
		border-radius: 24rpx;
		font-size: 26rpx;
		line-height: 44rpx;
		background: #D02129;
		color: #ffffff;
		font-family: Cabin;
		text-align: center;
	}

	.contacts .online-dot {
		position: absolute;
		width: 32rpx !important;
		height: 32rpx !important;
		right: 0;
		bottom: 0;
	}

	.contacts .online-tips {
		font-size: 28rpx;
		color: #666666;
	}
</style>
